<template>
  <el-drawer
    title="系统设置"
    v-model="settingStore.isDrawerSetting"
    :direction="direction"
    :before-close="handleClose"
    destroy-on-close
    :size="320"
  >
    <div class="theme-wrapper">
      <el-scrollbar height="85vh">
        <div class="form">
          <el-form label-width="100px" label-position="left">
            <el-form-item label="布局">
              <el-select
                class="theme-select-width"
                v-model="settingStore.mode"
                size="small"
                placeholder="请选择"
                @change="handleChangeMode"
              >
                <el-option
                  v-for="item in setting.modeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="Logo">
              <el-switch v-model="settingStore.isLogo" />
            </el-form-item>
            <el-form-item label="标签">
              <el-switch @change="handleChangeTag" v-model="setting.tag" />
            </el-form-item>
            <el-form-item label="面包屑">
              <el-switch
                :disabled="settingStore.mode === 'horizontal'"
                @change="handleChangeBread"
                v-model="setting.isBreadcrumb"
              />
            </el-form-item>
            <el-form-item label="固定头部">
              <el-switch :disabled="isMobile" v-model="settingStore.fixedHead" />
            </el-form-item>
            <el-form-item label="全屏">
              <el-switch v-model="settingStore.fullScreen" />
            </el-form-item>
            <el-form-item label="刷新">
              <el-switch v-model="settingStore.refresh" />
            </el-form-item>
            <el-form-item label="通知">
              <el-switch v-model="settingStore.notice" />
            </el-form-item>
          </el-form>
        </div>
      </el-scrollbar>
    </div>
    <template #footer>
      <div class="drawer-footer">
        <el-button size="small">恢复默认</el-button>
        <el-button type="primary" size="small" @click="handleToSave">保存</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script>
  export default {
    name: 'ThemeSetting',
  };
</script>

<script setup>
  import { ref, reactive, computed } from 'vue';
  import { useSettingStore } from '@/stores/setting';
  import { themeConfig } from '@/config/theme';

  const { themeOptions } = themeConfig;

  const settingStore = useSettingStore();

  const setting = reactive({
    tag: true,
    chalk: '',
    isLogo: true,
    mode: 'vertical',
    isBreadcrumb: true,
    fixedHead: true,
    fullscreen: true,
    refresh: true,
    notice: true,
    modeOption: [
      {
        value: 'vertical',
        label: '纵向',
      },
      {
        value: 'horizontal',
        label: '横向',
      },
    ],
    colorOptions: [
      {
        value: 'theme1',
        label: '主题1',
      },
      {
        value: 'theme2',
        label: '主题2',
      },
      {
        value: 'theme3',
        label: '主题3',
      },
      {
        value: 'theme4',
        label: '主题4',
      },
      {
        value: 'theme5',
        label: '主题5',
      },
      {
        value: 'theme6',
        label: '主题6',
      },
    ],
  });

  const direction = ref('rtl');

  const isMobile = computed(() => {
    return settingStore.isMobile;
  });

  const handleToSave = () => {
    settingStore.setSettingOptions(settingStore.$state);
    settingStore.setSettingDrawer(false);
  };

  const handleChangeTag = (val) => {
    settingStore.setTag(val);
  };

  const handleChangeBread = (val) => {
    settingStore.setBreadcrumb(val);
  };

  const handleChangeMode = (val) => {
    settingStore.setSettingOptions(settingStore.$state);
    settingStore.setMode(val);
  };

  const handleChangeTheme = (val) => {
    settingStore.setTheme(val);
  };

  const handleClose = () => {
    settingStore.setSettingDrawer(false);
  };
</script>

<style lang="scss" scoped>
  .theme-wrapper {
    display: flex;
    flex-direction: column;
    height: $base-height;
    .form {
      flex: 1;
    }
    :deep(.el-form-item__content) {
      text-align: right;
    }
    .theme-select-width {
      width: $base-select-width-small;
    }
  }
  .drawer-footer {
    box-sizing: border-box;
    align-content: center;
    justify-content: space-between;
    padding: 10px 0;
    background-color: $base-color-white;
    border-top: 1px solid $base-border-color;
  }
  :deep(.el-form-item__content) {
    justify-content: flex-end;
  }
</style>
